<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论发布案例</title>
    <script src="jquery.min.js"></script>
    <style>
        li{
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <textarea name="" id="" cols="100" rows="30"></textarea>
        <button>发布</button>
        <ul>
        </ul>
    </div>
    <!-- 【思路：文本框如果输入了内容，点击发布按钮，就获取到内容，动态创建一个li，放入文本框的内容，并且li包含删除操作；点击删除，可以删除当前li】 -->

    <script>
        $(function(){
            $('button').on({
                click: function(){
                    // 注意：此处用text()获取文本域内容无效，textarea的文本内容就是它的值，用val才合适
                    var txt = $('textarea').val();//获取文本域的值
                    console.log(txt);
                    // 如果文本域的值为空，就提示发布内容不能为空
                    if($.trim(txt)==""){//【$.trim(value)用来验证是否为空格】
                        alert('发布的内容不能为空，请先输入！');
                    }else{
                        // 动态创建li
                        var lii = $("<li></li>")
                        // 给ul添加li
                        $(this).siblings('ul').append(lii);
                        // 设置小li内容为当前文本域输入的内容 // 注意，此处用val()设置内容无效  因为val是设置/获取--值  而文本并不是li的唯一值 所以用text设置/获取文本才合适
                        lii.html(txt);
                        lii.slideDown();
                        // 创建删除按钮
                        var del = $("<button>删除</button>");
                        // 给小li内部添加删除按钮
                        lii.append(del);
                        // 点击删除按钮，就删除该按钮的父元素li  on可以给现在的和未来动态创建的元素绑定事件
                        $('li button').on({
                            click: function(){
                                $(this).parent('li').slideUp(function(){//让当前li上滑动 此处this指的是删除按钮
                                    $(this).remove();//删除当前li自己 此处this指的是li
                                    // empty()删除所有子元素
                                    // html("")删除元素内容
                                });
                            },
                        });
                        // 点击发布时，清空文本域
                        $(this).siblings('textarea').val("");
                    }    
                },
            });

            // // 点击文本域时，上一次输入的内容能置空  focus获得焦点  blur失去焦点  当文本框获得焦点时，清空文本框内容
            // $('textarea').on({
            //     // 当文本框获得焦点时，清空文本框内容
            //     focus: function() {
            //         $(this).val("");
            //     },
            // });
            
        })
    </script>
</body>
</html>